
const now = new Date();
const month = now.getMonth() + 1;
const day = now.getDate();
const updateTimeElement = document.querySelector('#update-time');
updateTimeElement.textContent = `${month}月${day}号`;

// 鼠标下面的文字
const tipone=document.querySelector('.tip-1')
const iconfont=document.querySelector('.iconfont')
let timer
iconfont.addEventListener('mouseenter',function(e){
    if(timer){
        clearTimeout(timer)
    }
    timer=setTimeout(()=>{
        tipone.style.display='block'
        const x=e.clientX
        const y=e.clientY
        tipone.style.left=x+'px'
        tipone.style.top=(y+5)+'px'
    },1000)
    
})
iconfont.addEventListener('mouseleave',function(){
    clearTimeout(timer)
    tipone.style.display='none'
})

//时长变图标
const rows = document.querySelectorAll('.row');
rows.forEach(function (row) {
row.addEventListener('mouseenter', function () {
const iconfour = document.querySelector('.iconfour', this);
const musictime = document.querySelector('.musictime', this);
if (musictime) {
    musictime.style.display = 'none';
}
if (iconfour) {
    iconfour.style.display = 'block';
}
});
row.addEventListener('mouseleave', function () {
const iconfour = document.querySelector('.iconfour', this);
const musictime = document.querySelector('.musictime', this);
if (musictime) {
    musictime.style.display = 'block';
}
if (iconfour) {
    iconfour.style.display = 'none';
}
});
});

function bindHoverEvents() {
const rows = document.querySelectorAll('.row');
rows.forEach(row => {
row.addEventListener('mouseenter', function() {
    const iconfour = this.querySelector('.iconfour');
    const musictime = this.querySelector('.musictime');
    if (musictime) musictime.style.display = 'none';
    if (iconfour) iconfour.style.display = 'block';
});

row.addEventListener('mouseleave', function() {
    const iconfour = this.querySelector('.iconfour');
    const musictime = this.querySelector('.musictime');
    if (musictime) musictime.style.display = 'block';
    if (iconfour) iconfour.style.display = 'none';
});
});
}


    const collect = document.querySelector('.collect');
    const forward = document.querySelector('.forward');
    const comment = document.querySelector('.comment');
    axios.defaults.baseURL = 'http://dkzbkn.natappfree.cc';
    
    axios.get('/chart', {})
    .then(({ data: { data }}) => {
        // 更新统计数据
        collect.textContent = `(${data.collect})`;
        forward.textContent = `(${data.forward})`;
        comment.textContent = `(${data.comment})`;
    
        // 处理歌曲数据
        const originalSongs = data.songs;
        const loopSongs = originalSongs.slice(3); // 提取第4-9首（索引3-8）
        const totalSongs = 100;
        const tbody = document.querySelector('.songlist');
        tbody.innerHTML = '';
    
        // 生成100行数据
        for (let i = 0; i < totalSongs; i++) {
            const tr = document.createElement('tr');
            tr.className = `row ${i >= 3 ? 'small-height' : ''}`;
    
            // 获取当前歌曲数据
            let currentSong;
            if(i < originalSongs.length) {
                // 前9首使用原始数据
                currentSong = originalSongs[i];
            } else {
                // 循环使用第4-9首（计算相对位置）
                const loopIndex = (i - originalSongs.length) % loopSongs.length;
                currentSong = loopSongs[loopIndex];
            }
    
            // 生成前三名特殊封面
            let coverImg = '';
            if(i < 3) {
                const imgMap = {
                    0: './认真的雪.jpg',
                    1: './一程山路.jpg',
                    2: './你还要我怎样.jpg'
                };
                coverImg = `<img src="${imgMap[i]}" class="rank-icon">`;
            }
    
            tr.innerHTML = `
                <td class="firstpart">
                    <div class="hd clearfix">
                        <span class="num leftfix clearfix">${i + 1}</span>
                        <div class="rk leftfix">
                            <span class="iconsmall"></span>
                        </div>
                    </div>
                </td>
                <td class="second">
                    ${i < 3 ? coverImg : ''}
                    <span class="broadcast leftfix"></span>
                    <div class="songname">${currentSong.name}</div>
                </td>
                <td class="third">
                    <span class="musictime">${currentSong.time}</span>
                    <div class="iconfour leftfix">
                        <span class="one leftfix"></span>
                        <span class="two leftfix"></span>
                        <span class="three leftfix"></span>
                        <span class="four leftfix"></span>
                    </div>
                </td>
                <td class="four_singer">
                    <span class="singername">${currentSong.author}</span>
                </td>
            `;
    
            tbody.appendChild(tr);
        }
    
        bindHoverEvents(); // 统一绑定事件
        document.querySelector('.sub').textContent = `${totalSongs}首歌`; // 更新歌曲数量
    })
    .catch((error) => {
        console.error('请求失败:', error);
    });